<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  String basePath1 ="ws://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
  <base href="<%=basePath%>">
  <title>燃气表识别统计</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="assets/css/gasCount.css">
  <link rel="stylesheet" href="assets/layui-v2.1.2/layui/css/layui.css">
  <script type="text/javascript" src="/assets/layui-v2.1.2/layui/layui.all.js"></script>
  <script type="text/javascript" src="/assets/js/jquery.min.js"></script>
  <script type="text/javascript" src="/assets/js/echarts.js"></script>
  <script type="text/javascript" src="/assets/js/raphael.js"></script>
  <script type="text/javascript" src="/assets/js/cycle.js"></script>
  <script type="text/javascript" src="/assets/common.js"></script>
  <script type="text/javascript" src="/assets/gasinit.js"></script>
</head>

<body>
<div class="container">
  <div class="header"><img src="/assets/img/logo.png" alt="燃气表识别统计"/>燃气表识别统计</div>
  <div class="content">
    <!--实时-->
    <div class="cont">
      <div class="title"><img src="/assets/img/titleIcon01.png" alt="实时"/>实时</div>
      <div class="cont-box box1">
        <div class="ctbox left">
          <div class="image gray">
            <div class="imgbox" id="imgbox1"><img id="imgresult" class="smallimg" src="/assets/img/defaultImg.png"/></div>
          </div>
        </div>
        <div class="graph">
          <img src="/assets/img/111.gif"/>
        </div>
        <div class="ctbox right">
          <div class="image blue">
            <div class="imgbox"><div id="resultdiv" class="out-data"></div></div>
          </div>
        </div>
      </div>
    </div>
    <!--趋势-->
    <div class="cont">
      <div class="title"><img src="/assets/img/titleIcon02.png" alt="趋势"/>趋势</div>
      <div class="cont-box box2">
        <div class="chart-title">
          <span>今日识别：<i id="tore" class="today"></i> 张</span>
          <span>昨日识别：<i id="yere" class="yesterday"></i> 张</span>
          <ul id="chartTab">
            <li data-id="0" title="DAY" class="active">DAY</li>
            <li data-id="1" title="WEEK">WEEK</li>
            <li data-id="2" title="MONTH">MONTH</li>
          </ul>
        </div>
        <div class="chart-cont">
          <div id="dayLine" class="chartbox active"></div>
          <div id="weekLine" class="chartbox"></div>
          <div id="monthLine" class="chartbox"></div>
        </div>
      </div>
    </div>
    <!--总体-->
    <div class="cont">
      <div class="title"><img src="/assets/img/titleIcon03.png" alt="总体"/>总体</div>
      <div class="cont-box box3">
        <div class="ztbox">
          <div id="processingbar"><img src="/assets/img/ztIcon01.png"/></div>
          <span>正确率：<i class="zti1"></i></span>
        </div>
        <div class="ztbox">
          <img src="/assets/img/ztIcon02.png"/>
          <span>共识别：<i class="zti2"></i></span>
        </div>
        <div class="ztbox">
          <img src="/assets/img/ztIcon03.png"/>
          <span>正确识别：<i class="zti3"></i></span>
        </div>
      </div>
    </div>
    <!--记录-->
    <div class="cont">
      <div class="title"><img src="/assets/img/titleIcon04.png" alt="记录"/>记录</div>
      <div class="cont-box box4">
        <div class="tab-box">
          <div class="tab-time">
            <span>时间：</span>
            <ul id="tabTIme">
              <li data-id="0" title="全部">全部</li>
              <li data-id="1" title="今天" class="active">今天</li>
              <li data-id="2" title="最近3天">最近3天</li>
              <li data-id="3" title="本周">本周</li>
              <li id="zdy1" data-id="9" title="自定义">自定义</li>
            </ul>
            <input id="zdy"/>
          </div>
          <div class="tab-result">
            <span>识别结果：</span>
            <ul id="tabResult">
              <li data-id="0" title="全部" class="active">全部</li>
              <li data-id="1" title="识别正确" >识别正确</li>
              <li data-id="2" title="识别错误">识别错误</li>
            </ul>
          </div>
          <div class="count">
            共<i id="recordcount">0</i>条记录
            <div class="export" id="export"><img title="导出数据" src="/assets/img/export.png" alt="导出"/></div>
            <div class="export" id="exportpic"><img title="导出图片" src="/assets/img/exportpic.png" alt="导出"/></div>
          </div>
        </div>
        <table class="table">
          <thead>
          <tr><th>时间</th><th>图片结果</th><th>识别结果</th><th>检验结果</th></tr>
          </thead>
          <tbody id="tbody">
          </tbody>
        </table>
        <div id="paging" style="  text-align:center;margin:0px auto;"></div>
        <form action="" id="ffSearch">
          <input id="timezone" name="timezone" value="1" type="hidden"/>
          <input id="reresult" name="reresult" value="0" type="hidden"/>
          <input id="currentPage" name="currentPage" value="1" type="hidden"/>
          <input id="pageSize"  name="pageSize" value="10" type="hidden"/>
        </form>
      </div>
    </div>
  </div>
</div>
<img id="mmm" style="display: none;width: 800px;height: 600px;" src="assets/img/defaultImg.png">
</body>

<script type="text/javascript">

    var basePath='<%=basePath%>';
    var wsurl='<%=basePath1%>';
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket(wsurl+"getmessage");
    }
    else{
        alert('Not support websocket');
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        //setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        //setMessageInnerHTML("open");
    };

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    };

    //连接关闭的回调方法
    websocket.onclose = function(){
        //setMessageInnerHTML("close");
    };

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    };

    //将消息显示在网页上
    function setMessageInnerHTML(data){
        var json=JSON.parse(data);
        console.log(json);
        drawBorder(json);
    }

    //关闭连接

    function closeWebSocket(){
        websocket.close();
    }

    //发送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
    }

    //点击放大图片
    $('#imgbox1').click(function(){

        layui.layer.photos({
            photos: '#imgbox1'
            ,closeBtn:1
            //,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
    });

    function drawBorder(json) {

        var image =  new Image();
        image.addEventListener("load",function() {
            if(json.json){
            var canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(image, 0, 0);
            ctx.strokeStyle = "red";
            ctx.lineWidth = 3;
            var rect = json.json[0].rect;
            ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
            $("#imgresult").attr("src", canvas.toDataURL("image/jpeg"));
            $("#resultdiv").text(json.json[0].numReading);
        }else{
            $("#imgresult").attr("src", json.imgContent);
            $("#resultdiv").text("未识别");
            }

        },false);
        image.src=json.imgContent;

    }
    //今日识别数量
    util.ajaxget1(util.url+"/hbase/getAllToDayCountNum/"+util.tablename,function (data) {
      $("#tore").text(data);
    },function (data) {
    });
    util.ajaxget1(util.url+"/hbase/getAllYesterdayCountNum/"+util.tablename,function (data) {
        $("#yere").text(data);
    },function (data) {
    });

//    util.ajaxFrom('ffSearch',util.url+"/hbase/getDetailData/"+util.tablename,function (data) {
//     console.log(data)
//    },function (data) {
//    });

</script>
</html>